/**
 * Created by Ysssssss on 2021/5/15.
 */
import React, { PureComponent } from 'react'
import PageBackHeader from "@common/PageBackHeader";
import { Button, Select } from 'antd'
import {connect} from "react-redux";
import SearchInput from "@common/presentational/SearchInput";
import CustomizeTableProvide, {CustomizeTable, CustomizeTablePagination} from "@common/presentational/CustomizeTable";
import { getStoreList } from "@sagas/storeManagement";
import { getAreaJson } from "@sagas/common";
import {getQuery, handleQueryEqual, setQuery} from "@utils/setUrlQuery";
import {withRouter} from "react-router-dom";
import { getSuperAdmin } from "@sagas/employee";
import ReEnrollModal from "@components/employee/modal/ReEnrollModal";
import ResetAdminModal from "@components/employee/modal/ResetAdminModal";

@connect(({ storeManagement }) => ({
    storeList: storeManagement.storeList
}), {
    getStoreList,
    getAreaJson,
    getSuperAdmin
})
@withRouter
class StoreListPage extends PureComponent {
    constructor(props) {
        super(props);
        const { status = '', busScope = '', query = '' } = getQuery(props.history)
        this.state = {
            status,
            busScope,
            query
        }

        this.tableRef = React.createRef()
        this.resetAdminModalRef = React.createRef()

        this.columns = [{
            key: 'store_name',
            dataIndex: 'store_name',
            title: '商品名称',
        }, {
            key: 'business_scope',
            dataIndex: 'business_scope',
            title: '服务区域',
        }, {
            key: 'contact_name',
            dataIndex: 'contact_name',
            title: '联系人',
        }, {
            key: 'contact_mobile',
            dataIndex: 'contact_mobile',
            title: '联系方式',
        }, {
            key: 'status',
            dataIndex: 'status',
            title: '状态',
            render: text => text === 'ok' ? '正常' : '停用'
        }, {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            render: (text, record) => ({
                children: (
                    <div className="flex-vertical-center">
                        <div className="mgr-8 ft-hover" onClick={this.goEditPage.bind(this, record.store_id)}>编辑</div>
                        <div className="mgr-8 ft-hover" onClick={this.getStoreSuperAdmin.bind(this, record.store_id)}>设置超管</div>
                        <div className="ft-hover">{ record.status === 'ok' ? '停用' : '启用' }</div>
                    </div>
                )
            })
        }]
    }

    componentDidMount () {
        this.props.getAreaJson()
    }

    handleValueChange (key, value) {
        this.setState({
            [key]: value
        }, this.initTable)
    }

    getStoreSuperAdmin (storeId) {
        this.props.getSuperAdmin({
            pStoreId: storeId
        }, () => {
            this.resetAdminModalRef.current?.show({
                storeId
            })
        })
    }

    goCreatePage () {
        this.props.history.push('/store-list/create')
    }

    goEditPage (storeId) {
        this.props.history.push(`/store-list/${storeId}/edit`)
    }

    initTable () {
        this.tableRef.current?.initPage()
    }

    getTableInfo ({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { status, busScope, query } = this.state
        this.props.getStoreList({
            status,
            busScope,
            search: query
        })
        this.setUrlQuery({ current, pageSize })
    }

    setUrlQuery ({ current, pageSize }) {
        const { history } = this.props
        const { status, busScope, query } = this.state
        let params = {
            query,
            status,
            busScope,
            pageNo: current,
            pageSize,
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    render () {
        const { status, busScope, query } = this.state
        const { storeList } = this.props

        return (
            <div className="bilin-web">
                <PageBackHeader title="店铺" backUrl="/main"/>
                <div className="bilin-web-body table-page product-list">
                    <div className="table-scroll-container mgt-12">
                        <div className="table-params page-params flex-row-between">
                            <Button type="primary" ghost onClick={this.goCreatePage.bind(this)}>+ 新建</Button>
                            <div className="flex-vertical-center">
                                <Select
                                    className="mgr-16"
                                    style={{width: '140px'}}
                                    onChange={this.handleValueChange.bind(this, 'busScope')}
                                    value={busScope}
                                >
                                    <Select.Option key="" value="">全部区域</Select.Option>
                                </Select>
                                <Select
                                    className="mgr-16"
                                    style={{width: '140px'}}
                                    onChange={this.handleValueChange.bind(this, 'status')}
                                    value={status}
                                >
                                    <Select.Option key="" value="">全部状态</Select.Option>
                                    <Select.Option key="ok" value="ok">正常</Select.Option>
                                    <Select.Option key="blocked" value="blocked">停用</Select.Option>
                                </Select>
                                <SearchInput style={{width: 240}}
                                             onChange={this.handleValueChange.bind(this, 'query')}
                                             initValue={query}
                                             value={query}
                                             placeholder="输入店铺名/负责人"
                                />
                            </div>
                        </div>
                        <CustomizeTableProvide ref={this.tableRef} tableKey="storeList" onChange={this.getTableInfo.bind(this)}>
                            <div className="table-list">
                                <CustomizeTable
                                    columns={this.columns}
                                    dataSource={storeList}
                                    pagination={false}
                                />
                            </div>
                            <div className="table-pagination">
                                <CustomizeTablePagination
                                    total={storeList.length}
                                />
                            </div>
                        </CustomizeTableProvide>
                    </div>
                </div>
                <ResetAdminModal ref={this.resetAdminModalRef} callback={this.getTableInfo.bind(this)}/>
            </div>
        )
    }
}

export default StoreListPage